<template>
	<view class="donate-page">
		<view class="nav-header">
		  <text class="nav-title">捐款</text>
		</view>
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
			</view>
		</tn-nav-bar>
		
		<!-- 顶部横幅 -->
		<view class="header-banner">
			<image class="banner-img" src="/static/donate.jpg" mode="aspectFill"></image>
			<view class="banner-overlay"></view>
			<view class="banner-content">
				<text class="banner-title">校友会捐款</text>
				<text class="banner-subtitle">清朝汇海，共助母校发展</text>
			</view>
		</view>

		<!-- 捐款项目 -->
		<view class="content-wrapper">
			<view class="section-title">
				<view class="title-text">捐赠项目</view>
			</view>

		<view class="project-selector">
			<picker @change="onProjectChange" :value="selectedProject" :range="projectNames">
				<view class="picker-wrapper">
					<text class="selected-project">{{ projects[selectedProject].name }}</text>
					<text class="picker-arrow">▼</text>
				</view>
			</picker>
			<view class="project-description">
				<text class="desc-text">{{ projects[selectedProject].description }}</text>
			</view>
		</view>

			<!-- 捐款金额 -->
			<view class="section-title">
				<view class="title-text">捐赠金额</view>
			</view>
			<view class="amount-options">
				<view
					v-for="(amount, index) in quickAmounts"
					:key="index"
					class="amount-btn"
					:class="{ active: selectedAmount === amount && !customAmount }"
					@click="selectAmount(amount)"
				>
					<text class="amount-btn-text">¥{{ amount }}</text>
				</view>
			</view>

			<!-- 金额输入 -->
			<view class="custom-input-wrapper">
				<text class="currency-symbol">¥</text>
				<input class="custom-input" type="digit" v-model="customAmount" placeholder="请输入捐款金额" @input="onCustomInput" />
			</view>

			<!-- 捐赠人 -->
			<view v-if="!isAnonymous" class="donor-input-wrapper">
				<input class="donor-input" type="text" v-model="donorName" placeholder="请输入捐赠人" />
			</view>

			<!-- 匿名捐款 -->
			<view class="anonymous-wrapper" @click="toggleAnonymous">
				<view class="checkbox" :class="{ checked: isAnonymous }">
					<text v-if="isAnonymous" class="checkbox-icon">✓</text>
				</view>
				<text class="anonymous-text">匿名捐款</text>
			</view>

			<!-- 留言区域 -->
			<view class="message-wrapper">
				<textarea class="message-input" v-model="message" placeholder="留下您的祝福或寄语..." maxlength="200" :auto-height="true"></textarea>
			</view>

			<!-- 立即支持按钮 -->
			<view class="submit-btn" @click="submitDonation">
				<text class="submit-btn-text">立即支持</text>
			</view>
		</view>
	</view>
</template>

<script>
const templatePageMixin = require('@/libs/mixin/template_page_mixin.js')

export default {
	mixins: [templatePageMixin],
	data() {
		return {
			projects: [
				{
					name: '奖学金基金',
					description: '资助品学兼优家庭经济困难的学生完成学业'
				},
				{
					name: '校园建设基金',
					description: '改善教学设施，建设现代化图书馆和实验室'
				},
				{
					name: '贫困生资助计划',
					description: '为贫困学生提供生活费和学习用品'
				}
			],
			quickAmounts: [50, 100, 200, 500],
			selectedProject: 0,
			selectedAmount: 100,
			customAmount: '',
			isAnonymous: false,
			donorName: '',
			message: ''
		};
	},
	computed: {
		projectNames() {
			return this.projects.map(project => project.name);
		}
	},
	methods: {
		onProjectChange(e) {
			this.selectedProject = e.detail.value;
		},
		selectAmount(amount) {
			this.selectedAmount = amount;
			this.customAmount = '';
		},
		onCustomInput(e) {
			this.selectedAmount = null;
		},
		toggleAnonymous() {
			this.isAnonymous = !this.isAnonymous;
		},
		submitDonation() {
			const amount = this.customAmount || this.selectedAmount;

			if (!amount || amount <= 0) {
				uni.showToast({
					title: '请输入捐款金额',
					icon: 'none'
				});
				return;
			}

			uni.showModal({
				title: '确认捐款',
				content: `您将向${this.projects[this.selectedProject].name}捐款 ¥${amount} 元`,
				success: (res) => {
					if (res.confirm) {
						// 这里可以调用支付接口
						uni.showToast({
							title: '感谢您的支持！',
							icon: 'success'
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.donate-page {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 40rpx;
}
/* 顶部导航栏 */
.nav-header {
  background: #FFFFFF;
  height: 100rpx;
  padding-top: calc(env(safe-area-inset-top));
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  
  .nav-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    letter-spacing: 2rpx;
  }
}

/* 自定义导航栏返回按钮样式 */
.tn-custom-nav-bar__back {
	width: 60%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: 1000rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.5);
	color: #FFFFFF;
	font-size: 18px;

	.icon {
		display: block;
		flex: 1;
		margin: auto;
		text-align: center;
	}
}

// 顶部横幅
.header-banner {
	position: relative;
	width: 100%;
	height: 350rpx;
	overflow: hidden;

	.banner-img {
		width: 100%;
		height: 100%;
	}

	.banner-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(180deg, rgba(22, 122, 70, 0.3) 0%, rgba(22, 122, 70, 0.6) 100%);
	}

	.banner-content {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.banner-title {
			font-size: 48rpx;
			font-weight: bold;
			color: #ffffff;
			margin-bottom: 20rpx;
			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
		}

		.banner-subtitle {
			font-size: 32rpx;
			color: #ffffff;
			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
		}
	}
}

// 内容区域
.content-wrapper {
	padding: 0 30rpx;
}

.section-title {
  margin: 25rpx 0 20rpx;
  display: flex;
  align-items: center;
  
  .title-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    position: relative;
    padding-left: 20rpx;
    display: flex;
    align-items: center;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 32rpx;
      background-color: #138e31;
      border-radius: 3rpx;
    }
  }
}

// 捐款项目选择器
.project-selector {
	margin-bottom: 50rpx;

	.picker-wrapper {
		background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
		border-radius: 16rpx;
		padding: 32rpx 36rpx;
		border: 2rpx solid #e8eaed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4rpx;
			background: linear-gradient(90deg, rgb(22, 122, 70) 0%, rgb(34, 150, 85) 100%);
			opacity: 0;
			transition: opacity 0.3s;
		}

		&:active {
			border-color: rgb(22, 122, 70);
			box-shadow: 0 8rpx 24rpx rgba(22, 122, 70, 0.15);
			transform: translateY(-2rpx);

			&::before {
				opacity: 1;
			}

			.picker-arrow {
				transform: rotate(180deg);
				color: rgb(22, 122, 70);
			}
		}

		.selected-project {
			font-size: 32rpx;
			font-weight: 600;
			color: #1a1a1a;
			letter-spacing: 0.5rpx;
			position: relative;
			
			&::before {
				content: '📋';
				margin-right: 12rpx;
				font-size: 28rpx;
			}
		}

		.picker-arrow {
			font-size: 28rpx;
			color: #8f9bb3;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			font-weight: bold;
			width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(22, 122, 70, 0.1);
			border-radius: 50%;
		}
	}

	.project-description {
		background: linear-gradient(135deg, #f8fffe 0%, #f0f9f4 100%);
		border-radius: 16rpx;
		padding: 28rpx 36rpx;
		margin-top: 20rpx;
		border: 1rpx solid rgba(22, 122, 70, 0.1);
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 6rpx;
			height: 100%;
			background: linear-gradient(180deg, rgb(22, 122, 70) 0%, rgb(34, 150, 85) 100%);
		}

		.desc-text {
			font-size: 28rpx;
			color: #4a5568;
			line-height: 1.7;
			font-weight: 400;
			letter-spacing: 0.3rpx;
			position: relative;
			
			&::before {
				content: '💡';
				margin-right: 12rpx;
				font-size: 24rpx;
			}
		}
	}
}

// 金额选项
.amount-options {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30rpx;

	.amount-btn {
		flex: 1;
		height: 80rpx;
		background: #ffffff;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 10rpx;
		transition: all 0.3s;

		&:first-child {
			margin-left: 0;
		}

		&:last-child {
			margin-right: 0;
		}

		&.active {
			background: rgb(22, 122, 70);
			border-color: rgb(22, 122, 70);

			.amount-btn-text {
				color: #ffffff;
			}
		}

		.amount-btn-text {
			font-size: 26rpx;
			color: #333333;
			font-weight: 500;
		}
	}
}

// 自定义金额输入
.custom-input-wrapper {
	position: relative;
	background: #ffffff;
	border-radius: 12rpx;
	padding: 0 30rpx;
	margin-bottom: 30rpx;
	border: 2rpx solid #e5e5e5;

	.currency-symbol {
		position: absolute;
		left: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 32rpx;
		color: #333333;
	}

	.custom-input {
		height: 88rpx;
		padding-left: 40rpx;
		font-size: 26rpx;
		color: #333333;

		&::placeholder {
			color: #cccccc;
		}
	}
}

// 捐赠人输入框
.donor-input-wrapper {
	background: #ffffff;
	border-radius: 12rpx;
	padding: 0 30rpx;
	margin-bottom: 30rpx;
	border: 2rpx solid #e5e5e5;

	.donor-input {
		height: 88rpx;
		padding-left: 40rpx;
		font-size: 26rpx;
		color: #333333;

		&::placeholder {
			color: #cccccc;
		}
	}
}

// 匿名捐款
.anonymous-wrapper {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;

	.checkbox {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #cccccc;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
		transition: all 0.3s;

		&.checked {
			background: rgb(22, 122, 70);
			border-color: rgb(22, 122, 70);
		}

		.checkbox-icon {
			font-size: 26rpx;
			color: #ffffff;
			font-weight: bold;
		}
	}

	.anonymous-text {
		font-size: 26rpx;
		color: #333333;
	}
}

// 留言区域
.message-wrapper {
	margin-bottom: 40rpx;

	.message-input {
		width: 100%;
		min-height: 200rpx;
		background: #ffffff;
		border-radius: 12rpx;
		padding: 24rpx;
		font-size: 26rpx;
		color: #333333;
		border: 2rpx solid #e5e5e5;
		box-sizing: border-box;

		&::placeholder {
			color: #cccccc;
		}
	}
}

// 提交按钮
.submit-btn {
	width: 100%;
	height: 96rpx;
	background: linear-gradient(135deg, rgb(22, 122, 70) 0%, rgb(28, 142, 80) 100%);
	border-radius: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(22, 122, 70, 0.3);

	&:active {
		opacity: 0.9;
		transform: translateY(2rpx);
	}

	.submit-btn-text {
		font-size: 32rpx;
		color: #ffffff;
		font-weight: bold;
	}
}
</style>
